
/*
*   {style,type,confirm,cancle,info}
*   style: class
*   type:warn|error|success|info
*   confirm: confirm callback
*   cancle: cancle callback;
*
*/

import xID from "./xID.js";

const tmplBase =`<div class="modal confirm-modal"  tabindex="-1" style="display:none">
  <div class="modal-md">
    <div class="modal-content">     
        <div class="modal-body"> 
            <span type="type"></span>
            <span type="content"></span>
        </div>
       <div class="modal-footer"> 
          <button  type="btn-confirm" class="btn btn-primary btn-sm">确 认</button>
          <button  type="btn-cancle" class="btn btn-secondary btn-sm">取 消</button>	       
      </div>
    </div>
  </div>
</div>
`;

export default class confirmModal{
    // 配置
    vCfg ;
    $root;
    $type;
    $info;
    vClickId = 'click.'+xID.getID();
 
    constructor() {
        this.$root =  $(tmplBase);
        $('body').append(this.$root);
        this.$content = this.$root.find('[type="content"]');
        this.$type = this.$root.find('[type="type"]');
        this.$root.on('click','[type="btn-confirm"]',this.evConfirm.bind(this));
        this.$root.on('click','[type="btn-cancle"]',this.evCancle.bind(this));
        this.$root.on('click', this.evRootClick.bind(this));
    };

    static getInstance() {
        if(!confirmModal.instance) {
            confirmModal.instance = new confirmModal();
        }
        return confirmModal.instance;
    }

    static pop(cfg){
        confirmModal.getInstance().vCfg = cfg;
        confirmModal.getInstance().render();
        confirmModal.getInstance().show();
    }


    show(){
        this.$root.show();
    }
    render(){      
        // type
        this.$type.removeClass();
        this.$type.addClass(this.vCfg.type||'info');
        this.$content.html(this.vCfg.content||'');
    }

    evCancle(e){
        if(this.vCfg && this.vCfg.cancle)
            this.vCfg.cancle();
        this.$root.hide();

    }

    evRootClick(e){
        if(this.$root.find(e.target).length<1)
            this.$root.hide();
    }

    evConfirm(e){
        if(this.vCfg && this.vCfg.confirm)
            this.vCfg.confirm();
        this.$root.hide();
    }

}

